<template>
	<view class="page_view">
		<view v-if="evaliateType==0" class="page_top">
			<image class="page_top_img" :src="ImgUrl+item.img" mode=""></image>
			<view class="page_top_right">
				<view class="page_top_right_top line-2">
					{{item.name}}
				</view>
				<view class="page_top_right_bottom">
					<!-- 200积分+ -->
					{{item.price}}元
				</view>
			</view>
		</view>
		<view v-if="evaliateType==1" class="page_top">
			<image class="page_top_img" :src="ImgUrl+item.items[0].goods.img[0]" mode=""></image>
			<view class="page_top_right">
				<view class="page_top_right_top line-2">
					{{item.items[0].goods.name}}
				</view>
				<view class="page_top_right_bottom">
					<template v-if="type==0">
						{{item.score}}积分
					</template>
					<template v-if="type==0&&item.amount">
						+
					</template>
					<template v-if="item.amount">
						{{item.amount}}元
					</template>
				</view>
			</view>
		</view>
		<view v-if="evaliateType==1" class="title">
			给商品打个分吧
		</view>
		<view v-if="evaliateType==0" class="title">
			给课程打个分吧
		</view>
		<view class="xing">
			<u-rate size="22" inactiveColor="#626262"  gutter='2' activeColor="#DD504A" :count="count" v-model="value"></u-rate>
		</view>
		<textarea class="textarea" placeholder="填写您的真实感受，可以帮助其他的小伙伴哦～" v-model="text_value"></textarea>
		<view class="other" v-if="evaliateType==1">
			<view class="other_title">
				其他用户还勾选了以下标签
			</view>
			<view class="other_view">
				<view :class="[(tag_id.indexOf(item.id)!=-1)?'other_view_item_active':'other_view_item']" v-for="(item,index) in other_list" @click="otherclick(item.id)">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="btn" @click="subimt">
			提交
		</view>
	</view>
</template>

<script>
	import {
		// order_comment,
		scorecomment,
		goodscomment,
		comment_tag
	} from "@/api/common.js"
	export default {
		data() {
			return {
				count: 5,
				value: 5,
				text_value:'',
				item:'',
				evaliateType:1,//课程
				other_list:[],
				tag_id:[],
				type:0,//0积分商城订单 1商城订单
			}
		},
		onLoad(options) {
			let obj = JSON.parse(decodeURIComponent(options.obj));
			this.item = obj;
			this.type = obj.typess;
			// if(this.item.evaliateType==1){
			// 	this.evaliateType = 1;
			// }
			this.commentTag();
		},
		computed:{
			ImgUrl(){
				return this.$store.state.ImgUrl
			}
		},
		methods: {
			commentTag(){
				comment_tag({}).then(res=>{
					this.other_list = res.data;
				})
			},
			otherclick(id){
				if(this.tag_id.indexOf(id)==-1){
					this.tag_id.push(id);
				}else{
					this.tag_id.splice(this.tag_id.indexOf(id),1);
				}
			},
			subimt(){
				if(this.type==0){
					let data = {
						id:this.item.id,
						star:this.value,
						// service_comment:'',
						content:this.text_value,
						// img:'',
						// is_anonymous:'',
						tag:this.tag_id.join(','),
					}
					scorecomment(data).then(res=>{
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},800)
					})
				}else{
					let data = {
						id:this.item.id,
						star:this.value,
						// service_comment:'',
						content:this.text_value,
						// img:'',
						// is_anonymous:'',
						tag:this.tag_id.join(','),
					}
					goodscomment(data).then(res=>{
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
								delta:1
							})
						},800)
					})
				}
				
			}
		}
	}
</script>

<style>
.page_view{
	padding: 0 30rpx;
}
.page_top{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 20rpx;
	padding-bottom: 24rpx;
	border-bottom: #F4F4F4 solid 2rpx;
}
.page_top_img{
	width:162rpx;
	height: 162rpx;
	border-radius: 16rpx;
	background-color: #333;
}
.page_top_right{
	width: calc(100% - 182rpx);
}
.page_top_right_top{
	color: #333;
	text-overflow: ellipsis;
	whitespace: nowrap;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
}
.page_top_right_bottom{
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 30rpx;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	margin-top: 30rpx;
}
.title{
	color: #161616;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	margin-top: 24rpx;
}
.xing{
	margin-top: 20rpx;
}
.textarea::placeholder{
	color: #A0A0A0;
}
.textarea{
	width: 100%;
	padding: 32rpx;
	box-sizing: border-box;
	color: #333;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	background-color:#F7F8FA;
	border-radius: 12rpx;
	margin-top: 30rpx;
}
.btn{
	width: 690rpx;
	height: 96rpx;
	border-radius: 48rpx;
	text-align: center;
	line-height: 96rpx;
	color: #FFF;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 32rpx;
	font-style: normal;
	font-weight: 400;
	background-color: #3570F6;
	position: absolute;
	bottom: 100rpx;
	left: 30rpx;
}
.other_title{
	color: #161616;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-weight: 700;
	margin-top: 32rpx;
	padding-top: 32rpx;
	border-top: 1rpx solid #F4F4F4;;
}
.other_view{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.other_view_item{
	display: inline-block;
	padding: 8rpx 20rpx;
	border-radius: 26rpx;
	background: #F4F4F4;
	margin-right: 24rpx;
	margin-top: 24rpx;
	color: var(--, #626262);
	font-family: Source Han Sans CN;
	font-size: 22rpx;
	font-weight: 400;
}
.other_view_item_active{
	display: inline-block;
	padding: 8rpx 20rpx;
	border-radius: 26rpx;
	background: #0165FB;
	margin-right: 24rpx;
	margin-top: 24rpx;
	color: #FFF;
	font-family: Source Han Sans CN;
	font-size: 22rpx;
	font-weight: 400;
}
</style>
